<template>
  <div>
    <div class="g-card">
      <div class="fxbw">
        <el-button type="primary" @click="$router.push({
                  path: './add',
                  query: {
                    isDetail: '0'
                  },
                })">新建协议</el-button>
      
      </div>
      <el-table :data="groupCodes" v-loading="loading" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <el-table-column prop="agreementName" label="协议名称" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="最后修改时间" align="center"></el-table-column>
        <!-- <el-table-column label="协议内容" align="center">
          <template #default="{ row }">
            <div style=" display: -webkit-box;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    white-space: pre-line;" v-html="row.content"></div>
          </template>
        </el-table-column> -->
        
        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.delFlag == 0" text @click="$router.push({
                  path: './add',
                  query: {
                    isDetail: '0',
                    id: row.id
                  },
                })">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        @pagination="getGroupCodes" />
    </div>

  </div>
</template>

<script>
import { getList, remove, downloadBatch, download, getTableTotal } from '@/api/drainageCode/group'

import { agreementList } from '@/api/drainageCode/pullNews'
export default {
  components: {
    // RealCode: defineAsyncComponent(() => import('./components/RealCode')),
    CodeLink: defineAsyncComponent(() => import('../components/CodeLink')),
  },
  data() {
    return {
      getList,
      remove,
      downloadBatch,
      query: {
        pageNum: 1,
        pageSize: 10,
        activityName: '',
        tagIds: '',
      },
      tagNames: '',
      loading: false,
      searchDate: '', // 查询日期
      groupCodes: [], // 群活码数据
      total: 0, // 总数据量
      realCodeDialog: false, // 实际群码总数dialog
      openGroupCodeId: null, // 打开实际群码关联的群活码ID
      openGroupCodeStatus: -1, // 打开实际群码的检索状态
      clipboard: null, // 拷贝对象
      showSelectTag: false,
      tagList: [],
      tagIndex: 1,
      tableList: [],
      loading: false,
      detailDialog: false,
      share: {},
    }
  },
  watch: {
    searchDate: {
      deep: true,
      handler(dateRange) {
        if (!dateRange || dateRange.length !== 2) {
          this.query.beginTime = ''
          this.query.endTime = ''
        } else {
          ;[this.query.beginTime, this.query.endTime] = dateRange
        }
      },
    },
    // 如果实际群码弹出框关闭,刷新数据
    realCodeDialog(val) {
      if (val === false) this.$refs.table?.getList()
    },
  },
  mounted() {},
  created() {
    this.getGroupCodes()
    this.$store.setBusininessDesc(
      `
        <div>生成永久二维码，根据规则自动切换企微客群，支持群满自动建群</div>
      `,
    )
  },
  unmounted() {},
  methods: {
    getGroupCodes() {
      const params = Object.assign({}, this.query)
      this.loading = true 
      agreementList(params)
        .then((res) => {
          console.log("获取协议列表 = ", res);
          if (res.code === 200) {
            this.groupCodes = res.rows
            this.total = parseInt(res.total)
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    getDetail(id) {
      this.detailDialog = true
      this.loading = true
      getTableTotal(id).then((res) => {
        this.tableList = res.data
        this.loading = false
      })
    },
    getSelectTag(list) {
      this.taglist = list
      let arr = []
      let arr1 = []
      list.forEach((dd) => {
        arr.push(dd.name)
        arr1.push(dd.tagId)
      })
      this.tagNames = arr.join(',')
      this.query.tagIds = arr1.join(',')
    },
    // 打开实际群码窗口
    // handleRealCodeDialogOpen(groupCodeId, status) {
    //   this.openGroupCodeId = groupCodeId
    //   this.openGroupCodeStatus = status
    //   this.realCodeDialog = true
    // },
  }
}
</script>

<style scoped lang="scss">
.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-desc {
  max-width: 150px;
}
.code-image {
  width: 360px;
  height: 360px;
}
.code-image--small {
  width: 50px;
  height: 50px;
}
.expire-icon {
  color: red;
}
</style>
